<template>
  <div>
    <el-dialog
      :visible.sync="dialogShow"
      :show-close="true"
      :append-to-body="false"
      :before-close="handleClose"
      class="chart-list-dialog"
      width="55%">
      <div v-loading="loading" style="min-height: 380px">
        <!--{{ JSON.stringify(chartdata) }}-->
        <chart-item
          v-if="chartdata"
          :ref-id="chartdata.id"
          :module-item-data="chartdata"
          :tag-for-resize="dialogShow"
          :columns-data-type="true"
          :columns="chartdata.tableData ? chartdata.tableData.columns : []"
          :rows="chartdata.tableData ? chartdata.tableData.rows : []"
          :can-edit="true"
          :show-area-max-height="380"
          change-btn-group-class="chart-change-btn"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getChartData } from '@/api/reportManage';
import Title from '@/components/Title';
import ChartItem from '@/components/DashboardPage/items/ChartItem';
export default {
  name: 'ChartShow',
  components: { Title, ChartItem },
  data() {
    return {
      dialogShow: false,
      chartdata: null,
      loading: false,
      id: ''
    };
  },
  methods: {
    getData(id) {
      this.loading = true;
      this.dialogShow = true;
      this.id = id;
      getChartData({ id }).then(res => {
        this.loading = false;
        if (res.data) {
          this.chartdata = res.data;
          if (res.data.yAxisCombo) {
            this.chartdata.yAxis.push(res.data.yAxisCombo);
          }
        } else {
          this.$message.error(res.message);
          this.handleClose();
        }
      }).catch(e => {
        this.handleClose();
        console.error(e);
      });
    },
    handleClose() {
      this.dialogShow = false;
      this.chartdata = null;
    }
  }
};
</script>
<style lang="scss" scoped>
.chart-list-dialog {
  & ::v-deep {
    .el-dialog {
      width: 960px !important;
      border-radius: 12px;
      height: 480px;
    }
    .el-dialog__body {
      padding: 2px 32px 32px 32px;
    }
    .el-dialog__headerbtn {
      top: 32px;
    }
    .el-dialog__close {
      font-size: 24px;
    }
  }
  ::v-deep .chart-change-btn {
    position: absolute;
    right: 30px;
    top: -2px;
  }
}
</style>
